<template>
  <view class="container">
    <!-- 顶部导航：返回 + 分享 -->
    <u-navbar
      back-text="返回"
      right-icon="share"
      @click-left="goBack"
      @click-right="shareStore"
    />

    <scroll-view scroll-y class="detail-scroll">
      <!-- 店铺图片 Banner -->
      <image class="banner" :src="store.image" mode="aspectFill" />

      <view class="detail-box">
        <!-- 店铺名称和评分 -->
        <view class="header">
          <text class="store-name">{{ store.name }}</text>
          <u-rate v-model="store.rating" :max="5" readonly size="20" />
        </view>

        <!-- 距离与服务人数 -->
        <view class="info-row">
          <text>距离: {{ store.distance }} km</text>
          <text>服务人数: {{ store.servedCount }} 人</text>
        </view>

        <!-- 详细地址 -->
        <view class="address">
          <u-icon name="location-filled" size="16" />
          <text>{{ store.address }}</text>
        </view>

        <!-- 门店描述 -->
        <view class="description">
          <text>{{ store.description }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 固定底部操作按钮 -->
    <view class="footer-actions">
      <u-button
        type="primary"
        radius="20"
        class="action-btn left-btn"
        @click="makeAppointment"
      >
        预约
      </u-button>
      <u-button
        type="danger"
        radius="20"
        icon="phone"
        class="action-btn right-btn"
        @click="callStore"
      >
        联系店铺
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 静态店铺数据，后期替换为后台接口
      store: {
        id: 1,
        name: '门店 A',
        address: '广州市天河区体育西路123号',
        image: 'https://jz.api.alipay168.cn/static/image/default_image.png',
        rating: 4.5,
        distance: 1.2,
        servedCount: 50,
        phone: '15000000001',
        description: '本店提供优质的服务和舒适的环境，主营美甲、美睫、护肤等项目，专业技师一对一服务。'
      }
    };
  },
  methods: {
    // 返回
    goBack() {
      uni.navigateBack();
    },
    // 分享
    shareStore() {
      uni.showShareMenu({ withShareTicket: true });
    },
    // 拨打电话
    callStore() {
      if (this.store.phone) {
        uni.makePhoneCall({ phoneNumber: this.store.phone });
      } else {
        uni.showToast({ title: '暂无联系电话', icon: 'none' });
      }
    },
    // 预约
    makeAppointment() {
      // 后期替换为实际预约页面路径
      uni.navigateTo({ url: '/pages/packageA/yuyue/appointment?storeId=' + this.store.id });
    }
  },
  // 分享配置
  onShareAppMessage() {
    return {
      title: this.store.name,
      path: `/pages/storeDetail/storeDetail?id=${this.store.id}`
    };
  }
};
</script>

<style scoped>
.container {
  flex: 1;
  background-color: #f5f5f5;
  position: relative;
}
.detail-scroll {
  padding-bottom: 80px; /* 为底部按钮预留空间 */
}
.banner {
  width: calc(100% - 40px);
  height: 200px;
  margin: 20px;
  border-radius: 10px;
}
.detail-box {
  background-color: #fff;
  margin: 0 20px 20px;
  padding: 20px;
  border-radius: 10px;
}
.header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.store-name {
  font-size: 20px;
  font-weight: bold;
}
.info-row {
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  color: #666;
}
.address {
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  color: #666;
}
.address u-icon {
  margin-right: 5px;
}
.description {
  margin-top: 15px;
  line-height: 20px;
  color: #888;
}
.footer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #ffffff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
.action-btn {
  height: 44px;
  flex: none;
}
.left-btn {
  /* 左对齐，无 margin */
}
.right-btn {
  /* 右对齐，无 margin */
}
</style>
